<template>
	<view class="addCarriageTemplate">
		<u-form :model="form" ref="form1" class="formBox">
			<view class="ml32 f3d f28">
				设置产品属性
			</view>
			<view class="boxBac" v-for="(item,index) in listSx" :key="index">
				<view class="flex_sb">
					<view class="f3d fb f32">
						{{item.name}}
					</view>
					<view class="f28 primary mt8" @click="btns('delete',index)">
						删除
					</view>
				</view>
				<u-form-item v-for="(item1,index1) in item.sonList" :key="index1" label=" " prop="name"
					label-position="top">
					<view class="flex" style="width: 100%;">
						<view class="ml12 flex1">
							<u-input v-model="item1.name" :placeholder="item1.placeholder" />
						</view>
						<view class="" @click="btns('deletSon',index,index1)">
							<u-icon name="minus-circle" size='40' color="#3065FA"></u-icon>
						</view>
					</view>

				</u-form-item>
				<view class="c306 mt24" @click="btns('addSon',index)">
					添加子规格内容
				</view>
			</view>
			<view class="flexRight pb32">
				<view class="tjcpsx" @click="forListSx">
					确定生成
				</view>
				<view class="tjcpsx" @click="btns('tjcpsx')">
					添加产品属性
				</view>
			</view>
			<view class="flex_sb">
				<view class="ml32 f3d f28">
					设置价格及其他信息
				</view>
				<view class="c306 mr32" @click="btnplsz">
					批量设置
				</view>
			</view>

			<view class="forBox1">
				<view class="forBox2" v-for="(item,index) in listSxNew" :key="index">
					<view class="flex_start">

						<image @tap="chooseImages(index,1)" class="images" :src="$wanlshop.oss(item.image)" mode="">
						</image>
						<view class="flex flex1 flex_warp">
							<view class="ml20 mb12 item1Name" v-for="(item1,index1) in item.name.split(' ')"
								:key="index1">
								{{item1}}
							</view>
						</view>

						<view class="f28 c3d ml12">
							已设置
						</view>
					</view>
					<view class="flex_sb mt16 inputsBorder">
						<view class="flex_y_center w50 mr12 ">
							<view class="info">
								原价￥
							</view>
							<view class="ml8 flex1">
								<u-input type="digit" v-model="item.market_price" placeholder="请输入原价" />
							</view>
						</view>
						<view class="flex_y_center w50 ml12">
							<view class="info">
								现价￥
							</view>
							<view class="ml8 flex1">
								<u-input type="digit" v-model="item.price" placeholder="请输入现价" />
							</view>
						</view>
					</view>
					<view class="flex_sb mt16 inputsBorder">
						<view class="flex_y_center w50 mr12 ">
							<view class="info">
								工匠价￥
							</view>
							<view class="ml8 flex1">
								<u-input type="digit" v-model="item.worker_price" placeholder="请输入工匠价" />
							</view>
						</view>
						<view class="flex_y_center w50 ml12">
							<view class="info">
								代理商价￥
							</view>
							<view class="ml8 flex1">
								<u-input type="digit" v-model="item.franchisee_price" placeholder="请输入代理商价" />
							</view>
						</view>
					</view>
					<view class="flex_sb mt16 inputsBorder">
						<view class="flex_y_center w50 mr12 ">
							<view class="info">
								成本价￥
							</view>
							<view class="ml8 flex1">
								<u-input type="digit" v-model="item.cost_price" placeholder="请输入成本价" />
							</view>
						</view>
						<view class="flex_y_center w50 ml12">
							<view class="info">
								库存
							</view>
							<view class="ml8 flex1">
								<u-input type="number" v-model="item.stocks" placeholder="请输入库存" />
							</view>
						</view>
					</view>

					<view class="flex_sb mt16 inputsBorder">
						<view class="flex_y_center  ">
							<view class="info">
								代理商可否购买
							</view>
							<view class="ml12">
								<u-radio-group v-model="item.is_shop_sku">
									<view class="flex h76">
										<u-radio :name="1">
											是
										</u-radio><u-radio :name="0">
											否
										</u-radio>
									</view>
								</u-radio-group>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="qd">
				<view class="btn" @click="btnSub">
					确定
				</view>
			</view>
		</u-form>
		<!-- 批量设置 弹出框 -->
		<u-popup v-model="showInstall" mode='bottom' border-radius="24">
			<view class="showInstallBox">
				<view class="tac f32 fb">
					批量设置
				</view>
				<view class="flex_y_center">
					<view class="">
						图片
					</view>
					<view class="flex1 ml12">
						<image @tap="chooseImages(index,1,'installImage')" class="images"
							:src="$wanlshop.oss(install.image)" mode="">
						</image>
					</view>
					<view class="c306 mr24" @click="btnInstall('image',install.image)">
						批量设置
					</view>
				</view>
				<view class="mt16 inputsBorder">
					<view class="flex_y_center  mr12 ">
						<view class="info">
							原价￥
						</view>
						<view class="ml8 flex1">
							<u-input type="digit" v-model="install.market_price" placeholder="批量设置原价" />
						</view>
						<view class="c306" @click="btnInstall('market_price',install.market_price)">
							批量设置
						</view>
					</view>
				</view>
				<view class="mt16 inputsBorder">
					<view class="flex_y_center  mr12 ">
						<view class="info">
							现价￥
						</view>
						<view class="ml8 flex1">
							<u-input type="digit" v-model="install.price" placeholder="批量设置现价" />
						</view>
						<view class="c306" @click="btnInstall('price',install.price)">
							批量设置
						</view>
					</view>
				</view>
				<view class="mt16 inputsBorder">
					<view class="flex_y_center  mr12">
						<view class="info">
							工匠价￥
						</view>
						<view class="ml8 flex1">
							<u-input type="digit" v-model="install.worker_price" placeholder="批量设置工匠价" />
						</view>
						<view class="c306" @click="btnInstall('worker_price',install.worker_price)">
							批量设置
						</view>
					</view>
				</view>
				<view class="mt16 inputsBorder">
					<view class="flex_y_center  mr12 ">
						<view class="info">
							代理商价￥
						</view>
						<view class="ml8 flex1">
							<u-input type="digit" v-model="install.franchisee_price" placeholder="批量设置代理商价" />
						</view>
						<view class="c306" @click="btnInstall('franchisee_price',install.franchisee_price)">
							批量设置
						</view>
					</view>
				</view>

				<view class="mt16 inputsBorder">
					<view class="flex_y_center  mr12 ">
						<view class="info">
							成本价 ￥
						</view>
						<view class="ml8 flex1">
							<u-input type="digit" v-model="install.cost_price" placeholder="批量设置成本价 " />
						</view>
						<view class="c306" @click="btnInstall('cost_price',install.cost_price)">
							批量设置
						</view>
					</view>
				</view>
				<view class="mt16 inputsBorder">
					<view class="flex_y_center  mr12 ">
						<view class="info">
							库存 ￥
						</view>
						<view class="ml8 flex1">
							<u-input type="number" v-model="install.stocks" placeholder="批量设置库存 " />
						</view>
						<view class="c306" @click="btnInstall('stocks',install.stocks)">
							批量设置
						</view>
					</view>
				</view>


				<view class="mt16 inputsBorder">
					<view class="flex_y_center  mr12 ">
						<view class="info mt12 mb12">
							代理商可否购买￥
						</view>
						<view class="ml12 mt12 mb12 flex1">
							<u-radio-group v-model="install.is_shop_sku">
								<view class="flex h76">
									<u-radio :name="1">
										是
									</u-radio>
									<u-radio :name="0">
										否
									</u-radio>

								</view>
							</u-radio-group>
						</view>
						<view class="c306" @click="btnInstall('is_shop_sku',install.is_shop_sku)">
							批量设置
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!--添加产品 弹出框 -->
		<u-popup v-model="showAddSx" mode='center'>
			<view class="showAddSxBox">
				<view class="tac c3 f28 fb">
					添加产品属性
				</view>
				<view class="inputBox">
					<u-input border type="text" v-model="addInputSx" placeholder="空格添加多个" />
				</view>
				<view class="flex_sa">
					<view class="btnCancel" @click="btns('cancelsx')">
						取消
					</view>
					<view class="btnBubmit" @click="btns('addsx')">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				install: {
					image: '',
					radio: '',
					is_shop_sku: '1',
				},
				showInstall: false,
				showAddSx: false,
				addInputSx: '',
				listSx: [{
					name: '规格',
					sonList: [{
						name: '一桶(示例)',
						placeholder: '请添加产品规格',
					}],
				}],
				listSxNew: [],
				form: {},
				multipart: null,
				uploadurl: null,

			}
		},
		onLoad(data) {


			if (data) {
				this.listSx = JSON.parse(data.listSx)
				this.listSxNew = JSON.parse(data.listSxNew)
			}
			console.log(this.listSx);
			console.log(this.listSxNew);
			this.getMultipart()
		},
		onShow() {},
		methods: {
			// 确定添加
			btnSub() {

				if (this.listSx.length == 0) {
					uni.showToast({
						title: '没有规格属性，请添加',
						icon: 'none'
					})
					return
				}
				if (this.listSxNew.length == 0) {
					uni.showToast({
						title: '没有产品数据，请确定生成',
						icon: 'none'
					})
					return
				}
				console.log(this.listSxNew);
				for (let data of this.listSxNew) {
					for (let k in data) {

						if (k == 'market_price' || k == 'price' || k == 'worker_price' || k == 'franchisee_price' || k ==
							'cost_price' || k == 'is_shop_sku') {
							if (data[k] == '' || data[k] == null) {
								uni.showToast({
									title: '请完整设置价格及其他信息',
									icon: 'none'
								})
								return
							}
						}


					}
					console.log(data.stocks);
					if (data.stocks === '' || data.stocks === null) {
						uni.showToast({
							title: '请完整设置价格及其他信息',
							icon: 'none'
						})
						return
					}
				}
				// 返回上个页面 并把数据传过去
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				console.log('-', prevPage);
				prevPage.$vm.listSxNew = this.listSxNew //修改上一页data里面的sh参数值为100
				prevPage.$vm.listSx = this.listSx //修改上一页data里面的sh参数值为100
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});

			},
			// 点击弹出 批量设置框
			btnplsz() {
				if (this.listSxNew.length == 0) {
					uni.showToast({
						title: '请先生成产品数据',
						icon: 'none'
					})
					return
				}
				this.showInstall = true
			},
			// 批量设置
			btnInstall(type, data) {
				console.log(type);
				this.listSxNew.forEach(a => {
					a[type] = data
				})

			},
			//上传图片
			chooseImages(index, count, type) {
				uni.chooseImage({
					count: count, //允许选择的数量
					success: res => {
						console.log(res);
						for (let i in res.tempFilePaths) {
							this.myUpload(res.tempFilePaths[i], index, type)
						}
						// this.imageList = this.imageList.concat(res.tempFilePaths);
						//console.log(this.imageList)
					}
				})
			},
			// 上传到线上
			myUpload(filePath, index, type) {
				uni.showLoading({
					title: '上传中...'
				})
				this.$api.upload({
					url: this.uploadurl,
					filePath: filePath,
					name: 'file',
					formData: this.multipart,
				}).then(res => {
					console.log('成功', res);
					uni.hideLoading()
					if (type == 'installImage') {
						this.install.image = res.url
					} else {
						this.listSxNew[index].image = res.url
					}
				}).catch(res => {
					uni.hideLoading()
				})
			},
			// 获取上传限制
			getMultipart() {
				this.$api.get({
					url: '/wanlshop/common/uploadData',
				}).then(res => {
					this.multipart = res.storage == 'local' ? null : res.multipart
					this.uploadurl = res.uploadurl
				})
			},
			// 循环产品 为空不能生成 -- 确定生成
			forListSx() {
				let type = true
				if (this.listSx.length == 0) {
					uni.showToast({
						title: '没有规格属性，请添加',
						icon: 'none'
					})
					return
				}
				this.listSx.forEach(i => {
					i.sonList.forEach(i1 => {
						if (i1.name == '') {
							uni.showToast({
								title: '规格名称不能为空',
								icon: 'none'
							})
							type = false
							return
						}
					})
				})
				if (type) {
					this.listSxNew = []
					this.generateCombinations(0, [], this.listSx)
				}
			},
			// 递归函数，用于生成所有可能的组合
			generateCombinations(currentIndex, currentCombination, allItems) {
				// 如果已经遍历了所有分类，将当前组合添加到结果数组中
				if (currentIndex === allItems.length) {
					this.listSxNew.push({
						name: currentCombination.join(' '),
						image: '',
						market_price: '',
						price: '',
						worker_price: '',
						franchisee_price: '',
						cost_price: '',
						stocks: '',

						is_shop_sku: '1',
					});
					return;
				}

				// 遍历当前分类的所有子项
				allItems[currentIndex].sonList.forEach(item => {

					// 将当前子项添加到组合中
					const newCombination = [...currentCombination, item.name];
					// 递归调用函数，处理下一个分类
					this.generateCombinations(currentIndex + 1, newCombination, allItems);
				});
				console.log('列表', this.listSxNew);
			},

			btns(type, index, index1) {
				// type -- 类型  index -- 父元素索引  index1 -- 子元素索引
				if (type == 'tjcpsx') { //打开模态框
					this.addInputSx = ''
					this.showAddSx = true
					return
				}
				if (type == 'addsx') { //弹出框 确定添加 确定按钮
					if (this.addInputSx == '') {
						return
					}
					let a = this.addInputSx.split(' ')
					a.forEach(i => {
						this.listSx.push({
							name: i,
							sonList: [{
								name: '',
								placeholder: '请添加' + i + '属性'
							}]
						})
					})
					this.showAddSx = false
					return
				}
				if (type == 'cancelsx') { //弹出框 取消添加 取消按钮
					this.addInputSx = ''
					this.showAddSx = false
					return
				}
				if (type == 'delete') { //删除产品属性 父
					this.listSx.splice(index, 1)
				}
				if (type == 'deletSon') { //删除产品属性 子
					this.listSx[index].sonList.splice(index1, 1)
				}
				if (type == 'addSon') { //添加父属性
					this.listSx[index].sonList.push({
						name: '',
						placeholder: '请添加' + this.listSx[index].name,
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.w50 {
		width: 50%;
	}

	.showInstallBox {
		padding: 32rpx;

		.images {
			width: 80rpx;
			height: 80rpx;
			border-radius: 4rpx;
			border: 1rpx #ccc solid;
		}

	}

	.inputsBorder {
		border-radius: 10rpx;
		border: 1rpx solid #BABABA;
		padding: 0 16rpx;
	}

	.addCarriageTemplate {
		padding: 24rpx 0 100rpx 0;

		.formBox {
			min-height: 100vh;
			padding-bottom: 120rpx;
		}

		.qd {
			width: 100vw;
			height: 98rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40rpx;
			z-index: 2;

			.btn {
				background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-weight: 400;
				font-size: 28rpx;
				width: 600rpx;
				height: 62rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 62rpx;
			}
		}


		.c306 {
			color: #3065FA;
		}

		.forBox1 {
			.forBox2 {
				padding: 32rpx 28rpx;
				background: #FFFFFF;
				width: 100%;
				margin-top: 20rpx;


				.h76 {
					height: 72rpx;
				}

				.images {
					width: 60rpx;
					height: 60rpx;
					border-radius: 4rpx;
					border: dashed #ccc 1rpx;
					margin-right: 24rpx;
				}

				.item1Name {
					background: #EAF0FF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					padding: 4rpx 16rpx;
				}
			}
		}

		.showAddSxBox {
			padding: 26rpx 36rpx;
			background: linear-gradient(181deg, #CBEDFF 0%, #F2FBFF 30%, #FFFFFF 100%);
			width: 540rpx;
			height: 340rpx;
			box-sizing: border-box;

			.inputBox {
				margin-top: 40rpx;
				margin-bottom: 58rpx;
			}

			.btnCancel {
				font-size: 28rpx;
				color: #4D4D4D;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 1rpx solid #d8d8d8;
				padding: 8rpx 48rpx;
			}

			.btnBubmit {
				background: #3065FA;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				padding: 8rpx 96rpx;
			}
		}

		.boxBac {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			padding: 32rpx;
			margin-top: 20rpx;
		}

		.flexRight {
			display: flex;
			flex-direction: row-reverse;
			margin-top: 16rpx;

			.tjcpsx {
				margin-right: 20rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				background: #3065FA;
				border-radius: 8rpx;
				padding: 6rpx 12rpx;
				text-align: center;

			}

		}

	}
</style>